<template>
    <div>
        <!-- 卡片 -->
        <Card>
            <span slot="title">账号列表</span>
            <div slot="content">
                <el-table
                    @selection-change="sel"
                    class="tableData"
                    :data="tableData"
                    ref="tableData"
                    tooltip-effect="dark"
                    style="width: 100%;"
                >
                    <el-table-column type="selection" width="55">
                    </el-table-column>

                    <el-table-column prop="account" label="账号" width="180">
                        <template slot-scope="scope">{{
                            scope.row.account
                        }}</template>
                    </el-table-column>

                    <el-table-column
                        prop="userGroup"
                        label="用户组"
                        width="220"
                    >
                        <template slot-scope="scope">{{
                            scope.row.userGroup
                        }}</template>
                    </el-table-column>

                    <el-table-column prop="ctime" label="创建时间" width="220">
                        <template slot-scope="scope">{{
                            scope.row.ctime | timer
                        }}</template>
                    </el-table-column>

                    <el-table-column label="操作" show-overflow-tooltip>
                        <template slot-scope="scope">
                            <el-button
                                size="mini"
                                @click="handleEdit(scope.row)"
                                >编辑</el-button
                            >
                            <el-button
                                size="mini"
                                type="danger"
                                @click="handleDelete(scope.row)"
                                >删除</el-button
                            >
                        </template>
                    </el-table-column>
                </el-table>

                <!-- 分页功能 -->
                <div class="block">
                    <el-pagination
                        @size-change="handleSizeChange"
                        @current-change="handleCurrentChange"
                        :current-page="currentPage"
                        :page-sizes="[1, 3, 5, 10]"
                        :page-size="pageSize"
                        layout="total, sizes, prev, pager, next, jumper"
                        :total="total"
                    >
                    </el-pagination>
                </div>
                <!-- 底部按钮 -->
                <div style="margin-top: 20px;">
                    <el-button type="danger" @click="toggleDle()"
                        >批量删除</el-button
                    >
                    <el-button type="primary" @click="toggleSel()"
                        >取消选择</el-button
                    >
                </div>

                <!-- 模态框 -->
                <el-dialog
                    title="用户编辑"
                    :visible.sync="dialogVisible"
                    width="450px"
                >
                    <el-form
                        ref="form"
                        :model="dialogForm"
                        label-width="80px"
                        class="dialogForm"
                    >
                        <el-form-item label="用户名">
                            <el-input v-model="dialogForm.account"></el-input>
                        </el-form-item>
                        <el-form-item label="用户组">
                            <el-select
                                v-model="dialogForm.userGroup"
                                placeholder="请选择活动区域"
                            >
                                <el-option
                                    label="超级管理员"
                                    value="shanghai"
                                ></el-option>
                                <el-option
                                    label="普通管理员"
                                    value="beijing"
                                ></el-option>
                            </el-select>
                        </el-form-item>
                    </el-form>

                    <span slot="footer" class="dialog-footer">
                        <el-button @click="dialogVisible = false"
                            >取 消</el-button
                        >
                        <el-button type="primary" @click="dialogOk"
                            >确 定</el-button
                        >
                    </span>
                </el-dialog>
            </div>
        </Card>
    </div>
</template>

<script>
import Card from "@/components/Card.vue";
import { getList, delAcc, delAccAll, changgeAcc } from "@/apis/acc.js";
import moment from "moment";
export default {
    components: {
        Card,
    },
    data() {
        return {
            dialogVisible: false, //模态框的显示和隐藏
            dialogForm: {
                account: "",
                userGroup: "",
            },
            tableData: [
                {
                    id: 0,
                    account: "蔡徐坤",
                    userGroup: "普通管理员",
                    ctime: "2020/8/10",
                },
            ],
            currentPage: 1, //当前页数
            total: 0, //总页数
            pageSize: 3, //每页显示的条数
        };
    },
    filters:{
        timer(val){
            return moment(val).format("YYYY-MM-DD hh:mm:ss")
        }
    },
    created() {
        this.getAcc();
    },

    methods: {
        // 获取账号列表
        async getAcc() {
            let { data, total } = await getList({
                currentPage: this.currentPage,
                pageSize: this.pageSize,
            });

            data.forEach((item) => {
                item.ctime = moment(item.ctime).format("YYYY-MM-DD hh:mm");
            });

            this.tableData = data;
            this.total = total;

            if (!data.length && this.currentPage != 1) {
                this.currentPage -= 1;
                // 更新视图
                this.getAcc();
            }
        },
        // 编辑
        handleEdit(row) {
            this.dialogVisible = true;
            this.dialogForm = { ...row };
        },
        // 删除
        handleDelete(row) {
            // 提示信息
            this.$confirm("此操作将永久删除该用户, 是否继续?", "提示", {
                confirmButtonText: "确定",
                cancelButtonText: "取消",
                type: "warning",
            })
                .then(async () => {
                    let { code } = await delAcc({ id: row.id });
                    if (code == 0) {
                        this.getAcc();
                    }
                })
                .catch(() => {
                    this.$message({
                        type: "info",
                        message: "已取消删除",
                    });
                });
        },
        // 每条页数改变时会触发
        handleSizeChange(val) {
            this.pageSize = val;
            this.getAcc();
        },
        // 当前页改变时触发
        handleCurrentChange(val) {
            this.currentPage = val;
            this.getAcc();
        },
        // 批量删除  获取id
        toggleDle() {
            if (!this.ids) {
                this.$message({
                    type: "error",
                    message: "请勾选账户",
                });
            } else {
                this.$confirm("此操作将永久删除所选用户, 是否继续?", "提示", {
                    confirmButtonText: "确定",
                    cancelButtonText: "取消",
                    type: "warning",
                })
                    .then(async () => {
                        let { code } = await delAccAll({
                            ids: JSON.stringify(this.ids),
                        });
                        if (code == 0) {
                            this.getAcc();
                        }
                    })
                    .catch(() => {
                        this.$message({
                            type: "info",
                            message: "已取消删除",
                        });
                    });
            }
        },
        // 取消选择
        toggleSel() {
            this.$refs.tableData.clearSelection();
        },
        // 选项发生改变事件
        sel(row) {
            this.ids = row.map((item) => item.id);
        },
        // 编辑模态框确定按钮
        async dialogOk() {
            this.dialogVisible = false;

            let { code } = await changgeAcc({
                id: this.dialogForm.id,
                account: this.dialogForm.account,
                userGroup: this.dialogForm.userGroup,
            });
            if (code == 0) {
                this.getAcc();
            }
        },
    },
};
</script>

<style lang="less" scoped>
.dialogForm {
    /deep/.el-input {
        width: 280px;
    }
}
.el-pagination {
    margin-top: 20px;
}
</style>